<template>
  <view class="flex-col page">
    <view class="flex-col">
        <MyHeader :paddingBottom="0">
          <view @click="selOrderShow = true" class="title flex-row items-center">
            <text class="mr-5">全部订单</text>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
        </MyHeader>
      <!-- 遮罩层 -->
      <u-overlay :show="selOrderShow">
      	<view style="background-image: linear-gradient(180deg, #4c8eef 0%, #fff 100%);">
      	  <MyHeader :paddingBottom="0" background="none">
      	    <view @click="selOrderShow = false" class="title flex-row items-center">
      	      <text class="mr-5">全部订单</text>
      	      <u-icon name="arrow-down-fill"></u-icon>
      	    </view>
      	  </MyHeader>
      	  <!-- 选择订单类型区域 -->
      	  <view v-if="selOrderShow" class="sel_order">
      	    <view v-for="(item,index) in orderType" :key="index" :class="{active:index===0}" class="sel_order_item">
      	      {{item.name}}
      	    </view>
      	  </view>
      	</view>
      	</u-overlay>
      
        <view class="tab-bottom">
          <u-tabs :itemStyle="{flex:1,height:'88rpx'}" :list="navs" @click="navHandle"></u-tabs>
        </view>
        <view class="flex-col list">
          <view v-if="items.length" class="flex-col mt-12 list-item" v-for="(item, index) in items" :key="index">
            <view class="flex-row justify-between self-stretch group_4">
              <view class="flex-row items-center">
                <text class="font_2 text_2 text_8">景德镇学院</text>
                <view class="shrink-0 section_6 ml-5"></view>
                <text class="font_2 text_2 text_9 ml-5">景德镇北站</text>
              </view>
              <text class="font_3 text_2">待支付</text>
            </view>
            <text class="mt-12 self-start font_4 text_2 text_10">订单号：E42619784652</text>
            <view class="mt-12 flex-row items-end self-stretch group_5">
              <view class="flex-col flex-1">
                <text class="self-start font_4 text_2 text_11">下单时间：2024.12.26</text>
                <view class="mt-10 flex-row items-center self-stretch">
                  <text class="flex-1 font_5 text_2 text_12">发车时间：2024年12月31日 周二</text>
                  <text class="ml-20 shrink-0 font_7 text_2">13:30</text>
                </view>
              </view>
              <view class="ml-20 flex-col justify-start items-center shrink-0 text-wrapper">
                <text class="font_6">取消订单</text>
              </view>
            </view>
          </view>
          <view v-else class="flex-col items-center group_my">
            <image class="image_my"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=0a37079941ec25c1dabd4e71a93b28ce.png" />
            <text class="text_my mt-15">暂无订单</text>
          </view>
        </view>
      
    </view>
  </view>
</template>

<script setup>
  import {
    reactive, ref
  } from 'vue';
  const navs = reactive([{
      name: '全部'
    },
    {
      name: '待支付'
    },
    {
      name: '已支付'
    },
    {
      name: '历史订单'
    }
  ]);
  // const items = []
  const items = [null, null]
  const navHandle = (e) => {
    console.log(e);
  }
  const orderType = [{
    name: '全部订单'
  }, {
    name: '外卖'
  }, {
    name: '拼车'
  }]
  const selOrderShow = ref(false)
</script>

<style lang="scss" scoped>
  .position-box{
    position: absolute;
    z-index: -1;
  }
  .sel_order {
    display: flex;
    height: 180rpx;
    justify-content: space-around;
    align-items: center;
    border-radius: 0px 0px 16rpx 16rpx;
    .sel_order_item {
      width: 176rpx;
      height: 68rpx;
      opacity: 1;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: rgba(51, 51, 51, 1);
      background: #ffffff;

      &.active {
        color: #fff;
        background: rgba(114, 174, 253, 1);
      }
    }
  }

  .mr-5 {
    margin-right: 10rpx;
  }

  .mt-15 {
    margin-top: 30rpx;
  }

  .image_my {
    width: 110rpx;
    height: 118rpx;
  }

  .text_my {
    color: #999999;
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.84rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .ml-5 {
    margin-left: 10rpx;
  }

  .mt-231 {
    margin-top: 462rpx;
  }

  .page {
    background-color: #f7f8fa;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  .section {
    background-color: #ffffff;
    border-bottom: solid 2rpx #f0f0f0;
  }

  .section_2 {
    padding: 36rpx 12rpx 42rpx 34rpx;
    background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
  }

  .group {
    padding-left: 36rpx;
    padding-right: 16rpx;
  }

  .text {
    color: #333333;
    font-size: 30rpx;
    font-family: SFProText;
    font-weight: 600;
    line-height: 21.78rpx;
  }

  .image {
    width: 34rpx;
    height: 22rpx;
  }

  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }

  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }

  .group_2 {
    padding: 20rpx 0 12rpx;
  }

  .image_4 {
    width: 18rpx;
    height: 34rpx;
  }

  .pos_2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .image_6 {
    width: 16rpx;
    height: 16rpx;
  }

  .section_3 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }

  .pos {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .image-wrapper {
    width: 38rpx;
  }

  .image_7 {
    width: 38rpx;
    height: 14rpx;
  }

  .section_4 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }

  .image_5 {
    width: 34rpx;
    height: 34rpx;
  }

  .group_3 {
    padding: 0 60rpx 24rpx;
  }

  .font {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 28rpx;
    color: #333333;
  }

  .text_4 {
    color: #4c8eef;
    line-height: 29.72rpx;
  }

  .text_5 {
    line-height: 29.48rpx;
  }

  .text_6 {
    line-height: 29.48rpx;
  }

  .text_7 {
    line-height: 29.32rpx;
  }

  .section_5 {
    margin-left: 66rpx;
    background-color: #4c8eef;
    width: 56rpx;
    height: 4rpx;
  }

  .list {
    padding: 24rpx 24rpx 0;
  }

  .list-item {
    padding: 0 8rpx 28rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
  }

  .list-item:first-child {
    margin-top: 0;
  }

  .group_4 {
    padding: 36rpx 24rpx 24rpx;
    border-bottom: solid 1rpx #e5e5e5;
  }

  .group_my {
    margin-top: 458rpx;
  }

  .font_2 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 28rpx;
    color: #333333;
  }

  .section_6 {
    background-color: #333333;
    width: 38rpx;
    height: 2rpx;
  }

  .font_3 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.78rpx;
    color: #4c8eef;
  }

  .font_4 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 21.96rpx;
    color: #333333;
  }

  .group_5 {
    padding-left: 28rpx;
    padding-right: 20rpx;
  }

  .font_5 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    line-height: 28rpx;
    color: #333333;
  }

  .font_7 {
    font-size: 24rpx;
    font-family: SourceHanSansCN;
    color: #333333;
  }

  .text_2 {
    opacity: 0.9;
  }

  .text_12 {
    text-align: center;
  }

  .text_11 {
    line-height: 21.98rpx;
  }

  .text_10 {
    margin-left: 28rpx;
  }

  .text_9 {
    line-height: 26.1rpx;
  }

  .text_8 {
    line-height: 26.26rpx;
  }

  .text_3 {
    color: #333333;
    font-size: 36rpx;
    font-family: SourceHanSansCN;
    line-height: 33.74rpx;
  }

  .text-wrapper {
    padding: 8rpx 0;
    background-color: #ffffff;
    border-radius: 34rpx;
    width: 124rpx;
    height: 42rpx;
    border-left: solid 2rpx #e5e5e5;
    border-right: solid 2rpx #e5e5e5;
    border-top: solid 2rpx #e5e5e5;
    border-bottom: solid 2rpx #e5e5e5;
  }

  .font_6 {
    font-size: 20rpx;
    font-family: SourceHanSansCN;
    line-height: 18.42rpx;
    color: #a6a6a6;
  }

  .section_7 {
    background-color: #ffffff;
    height: 68rpx;
  }
</style>